<template>
    <el-container class="search-table">

        <el-main class="search-table__body">
            <el-table ref="tableRef"
                      :data="tableData"
                      :empty-text="emptyText"
                      stripe
                      border
                      highlight-current-row
                      :row-class-name="rowClassName"
                      tooltip-effect="light"
                      :header-cell-style="{ fontWeight: 'bold',textAlign:'center','height':'45px' }"
                      :cell-style="{'text-align':'center','height':'55px'}"
                      size="mini"
                      :row-key="rowKeys"
                      v-loading="tableLoading"
                      :default-sort="defaultSort"
                      @sort-change="handleSortChange"
                      @row-click="rowClick"
                      @selection-change="
                    selection => {
                        this.$emit('selectionChange', selection)
                    }"
                      @select-all="
                    selection => {
                        this.$emit('selectAll', selection)
                    }"
            >
                <template v-for="(item, index) in tableOption">
                    <el-table-column
                        :key="index"
                        :prop="item.prop"
                        :label="item.label"
                        :align="item.align || 'center'"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <slot
                                v-if="item.slot"
                                :name="scope.column.property"
                                :row="scope.row"
                                :$index="scope.$index"
                            />
                            <span v-else>{{ scope.row[scope.column.property] }}</span>
                        </template>
                    </el-table-column>
                </template>

                <slot></slot>
            </el-table>
        </el-main>
        <el-footer class="search-table__footer" height="42px" v-if="$slots.footer">
            <slot name="footer"></slot>
        </el-footer>
    </el-container>
</template>

<script>
export default {
    name: 'TableBox',

    props: {
        labelWidth: {
            type: String,
            default: '70px'
        },
        tableData: {
            type: Array,
            default: () => []
        },
        tableOption: {
            type: Array,
            default: function () {
                return []
            }
        },
        emptyText: {
            type: String,
            default: ''
        },
        rowClassName: {
            type: Function
        },
        rowKeys: {
            type: Function
        },
        tableLoading: Boolean,
        defaultSort: {
            type: Object,
            default: () => {}
        },
    },
    data() {
        return {
            tableHeight: '' //table表格高度
        }
    },
    methods: {
        // 表格排序
        handleSortChange(event) {
            const { prop, order } = event
            this.$emit('sortChange', {
                prop,
                order: order ? String.prototype.replace.call(order, 'ending', '') : null
            })
        },
        // 点击行
        rowClick(row) {
            this.$emit("rowClick", row);
        },
    }
}
</script>
<style lang='scss' scoped>
::v-deep .el-table--border::before{
    background-color:transparent;
}
::v-deep .el-table--border::after{
    background-color:transparent;
}

</style>
